<template>
<div class="wrap" ref="wrap">
  <div>
    <div class="list-1">
      <div class="title border-bottom">当前城市</div>
      <div class="content">
        <div class="content__box">
          {{ this.city }}
        </div>
      </div>
      <div class="title border-bottom">热门城市</div>
      <div class="content">
        <div
          class="content__box"
          v-for="item of hot"
          :key="item.id"
          @click="handleChangeClick"
        >{{item.name}}
        </div>
      </div>
    </div>
    <div class="list-2" v-for="(item, key) of all" :key="key">
      <div class="title" :ref="key">{{key}}</div>
      <div
        class="content border"
        v-for="item of item"
        :key="item.id"
        @click="handleChangeClick">{{item.name}}
      </div>
    </div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'AllCities',
  props: {
    hot: Array,
    all: Object,
    letter: String
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    handleChangeClick (e) {
      this.changeCity(e.target.innerText)
      this.$router.push('/')
    },
    /*    ...mapMutations({
      change: 'changeCity'
    }), */
    ...mapMutations(['changeCity'])
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrap, {click: true})
  },
  activated () {
    this.scroll.refresh()
  },
  watch: {
    letter () {
      if (this.letter) {
        const el = this.$refs[this.letter][0]
        this.scroll.scrollToElement(el)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~@style/variables.styl"
.wrap
  position absolute
  top $header*2
  bottom 0px
  left 0px
  right 0px
  overflow hidden
  .list-1
    .border
      border-color #000
    .title
      title()
    .content
      display flex
      justify-content space-between
      flex-wrap wrap
      padding-right 30px
      padding-left 14px
      padding-top 4px
      margin-bottom 14px
      &:nth-child(2)
        .content__box
          color $bgcolor
          border 1px solid $bgcolor
      &__box
        width 28%
        padding 6px
        line-height 14px
        text-align center
        border 1px solid #ccc
        border-radius 2px
        margin-top 10px
  .list-2
    .title
      title()
    .content
      line-height 36px
      padding-left 13px

</style>
